<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>新漫监控平台</title>
    <link rel="stylesheet" href="css/layout.css">
    <script src="js/jquery.js"></script>
    <script src="js/jquery.slimscroll.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/index.js"></script>
</head>
<img src="images/bg1.jpg" class="bgimg" alt="">

<body class="user">
    <div class="contentbox">
        <div class="title">
            <span>后台管理界面</span>
            <span>|</span>
            <span class="small-title">SIMMAX</span>
            <div class="avatar-box">
                <img src="images/bg.jpg" class="avatar" alt="">
                <span class="ava-name">LIULISHEJUZHE</span>
            </div>
            <div class="setting-box">
                <a href="#">
                    <img src="images/back.png" alt=""> 退出
                </a>
            </div>
        </div>
        <ul class="menu-box">
            <li class="menu1 ">
                <a href="interface.html">连接设备</a>
            </li>
            <li class="menu2">
                <a href="index.html">实时监控</a>
            </li>
            <li class="menu6">
                <a href="dataManager.html">数据管理</a>
            </li>
            <li class="menu3">
                <a href="Parameters.html">参数设置</a>
            </li>
            <li class="menu4 active">
                <a href="user.html">用户管理</a>
            </li>
            <li class="menu5">
                <a href="#">帮助</a>
            </li>
            <li class="menu7">
                <a href="systemLog.html">日志管理</a>
            </li>
        </ul>
        <div class="mainbox">
            <div class="user-form">
                    <div class="user-search">
                        <input type="text" class="user-input" placeholder="搜索用户">
                        <i class="user-icon"></i>
                    </div>
                    <div class="user-add">
                        新增用户
                    </div>
                    <div class="user-delete">
                        删除用户
                    </div>
            </div>
            <div id="screenbox">
                <span class="slimTop"></span>
                <span class="slimBottom"></span>
                <div class="tablelist">
                    <table class="user-table" cellpadding="0" cellspacing="0">
                        <thead>
                            <tr>
                                <td width="51px !important">
                                    <span class="newCheck">
                                        <input type="checkbox" class="checkAll">
                                    </span>
                                </td>
                                <td width="136px !important">部门名称</td>
                                <td width="103px !important">登录名</td>
                                <td width="123px !important">密码</td>
                                <td width="90px !important">姓名</td>
                                <td width="103px !important">权限</td>
                                <td width="225px !important">联系电话</td>
                                <td>操作</td>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $(".tablelist").slimScroll({
        height: '370px',
        size: "10px",
        alwaysVisible: true,
        opacity: 1,
        railVisible: true,
        //        railColor:"#2d2d2d",
        railColor: 'url("images/scroll_bg.png")',
        railOpacity: 1,
        railBorderRadius: "7px",
        railDraggable: true
    });
    function checkeAll() {
        var $input = $("input[name='users[]']"),
            count = 0,
            lg = $input.length;
        var clg = $("input[name='users[]']:checked").length;
        if (clg === lg) {
            $(".checkAll").parents(".newCheck").addClass("active");
        } else {
            $(".checkAll").parents(".newCheck").removeClass("active");
        }
    }
    /*选中单条数据*/
    $(document).on("click", "input[name='users[]']", function () {
        var flag = $(this).prop("checked");
        var $par = $(this).parents(".newCheck");
        if (flag) {
            $par.addClass("active");
        } else {
            $par.removeClass("active");
        }
        checkeAll();
    });
    /*全选*/
    $(document).on("click", ".checkAll", function () {
        var flag = $(this).prop("checked");
        var $par = $(this).parents(".newCheck");
        var $input = $("input[name='users[]'");
        if (flag) {
            $par.addClass("active");
            $input.parents(".newCheck").addClass("active");
        } else {
            $par.removeClass("active");
            $input.parents(".newCheck").removeClass("active");
        }
    });
    function user(id) {
        $.ajax({
            url: apiDomain + userList,
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            success: function (data) {
                console.log(data);
                var data = data.data;
                for (var i = 0; i < data.length; i++) {
                    console.log(data[i].id);
                    $('tbody').append("<tr class='active'>" +
                        "<td><span class='newCheck'><input type='hidden' name='userName[]' value=" + data[i].id + "><input type='checkbox' name='users[]' value=" + data[i].id + "></span></td>" +
                        "<td class='activeListd1'>" + data[i].department + "</td> " +
                        "<td class='activeListd2'>" + data[i].account + "</td>" +
                        "<td class='activeListd3'>" + data[i].password + "</td>" +
                        "<td class='activeListd4'>" + data[i].name + "</td>" +
                        "<td class='activeListd5'>" + data[i].type + "</td>" +
                        "<td class='activeListd6'>" + data[i].tel + "</td>" +
                        "<td ><a href='javascript:void(0);' class='user-edit'>修改</a></td>" +
                        "</tr>");
                    $('tbody').append("<tr class='activeList'>" +
                        "<td><span class='newCheck'><input type='hidden' name='userName[]' value=" + data[i].id + "><input type='checkbox' name='users[]' value=" + data[i].id + "></span></td>" +
                        "<td><input class='activeListInput1 activeListInput' type='text' value=" + data[i].department + "></td> " +
                        "<td><input class='activeListInput2 activeListInput' type='text' value=" + data[i].account + "></td>" +
                        "<td><input class='activeListInput3 activeListInput' type='text' value=" + data[i].password + "></td>" +
                        "<td><input class='activeListInput4 activeListInput' type='text' value=" + data[i].name + "></td>" +
                        "<td><select name='' id='' class='activeListInput5 activeListInput'><option value='管理员'>管理员</option></select></td>" +
                        "<td><input class='activeListInput6 activeListInput' type='text' value=" + data[i].tel + "></td>" +
                        "<td><a href='javascript:void(0);' class='user-sure'>确认</a></td>" +
                        "</tr>")
                }
            }
        });
    }
    user(1);
    /*点击修改页面*/
    $(document).on('click', '.user-edit', function () {
        $(this).parents('.active').next('.activeList').show();
        $(this).parents('.active').hide();

    });
    /*点击添加确认*/
    $(document).on('click', '.user-sure', function () {
        var id = $(this).parents('.activeList').find("input[name='userName[]']").val();
        var department = $(this).parents('.activeList').find(".activeListInput1").val();/*部门*/
        var account = $(this).parents('.activeList').find('.activeListInput2').val();/*登录名*/
        var password = $(this).parents('.activeList').find('.activeListInput3').val();/*密码*/
        //        alert(password);
        var name = $(this).parents('.activeList').find('.activeListInput4').val();/*姓名*/
        var type = $(this).parents('.activeList').find('select.activeListInput5').val();/*权限*/
        var tel = $(this).parents('.activeList').find('.activeListInput6').val();/*电话*/
        var _this = $(this);
        $.ajax({
            url: apiDomain + userUpdte,
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            type: 'post',
            data: {
                id: id,
                department: department,
                account: account,
                password: password,
                name: name,
                type: type,
                tel: tel,
                passwordConfirm: password
            },
            success: function (data) {
                _this.parents('.activeList').prev('.active').show();
                _this.parents('.activeList').prev('.active').find('.activeListd1').html(department);
                _this.parents('.activeList').prev('.active').find('.activeListd2').html(account);
                _this.parents('.activeList').prev('.active').find('.activeListd3').html(password);
                _this.parents('.activeList').prev('.active').find('.activeListd4').html(name);
                _this.parents('.activeList').prev('.active').find('.activeListd5').html(type);
                _this.parents('.activeList').prev('.active').find('.activeListd6').html(tel);
                _this.parents('.activeList').hide();
            }
        })

    });
    /*点击删除*/
    $('.user-delete').on('click', function () {
        var arr = [];
        $("input[name='users[]']:checked").each(function () {
            console.log($(this).prev("input[name='userName[]']").val());
            arr.push($(this).val());

        });
        $.ajax({
            url: apiDomain + userDelete,
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            traditional: true,
            type: "POST",
            data: {
                idList:arr
            },
            success: function (data) {
                console.log(data);
                $("input[name='users[]']:checked").each(function () {
                    $(this).parents('.active').next('.activeList').remove();
                    $(this).parents('.active').remove();
                });
            }
        })


    });
    /*添加用户*/
    $('.user-add').on('click', function () {
        var names = Math.random() * 10 + 1;
        var name = Math.floor(names * 100) / 100;
        var data = {
            account: name,
            password: name,
            department: "设计部",
            name: "测试",
            passwordConfirm: name,
            tel: 15968110000,
            type: "管理员"
        };
        $.ajax({
            type: "post",
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            url: apiDomain + userCreate,
            data: data,
            success: function (data) {
                console.log(data);
               location.reload();
            },
        })


    });


    $('.user-icon').on('click', function () {
        var data = {
                    searchInfo: $('.user-input').val()
                }
        $.ajax({
            url: apiDomain + userList,
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            data:data,
            success: function (data) {
                console.log(data);
                var data = data.data;
                $('tbody').html('');
                for (var i = 0; i < data.length; i++) {
                    $('tbody').append("<tr class='active'>" +
                        "<td><span class='newCheck'><input type='hidden' name='userName[]' value=" + data[i].id + "><input type='checkbox' name='users[]' value=" + data[i].id + "></span></td>" +
                        "<td class='activeListd1'>" + data[i].department + "</td> " +
                        "<td class='activeListd2'>" + data[i].account + "</td>" +
                        "<td class='activeListd3'>" + data[i].password + "</td>" +
                        "<td class='activeListd4'>" + data[i].name + "</td>" +
                        "<td class='activeListd5'>" + data[i].type + "</td>" +
                        "<td class='activeListd6'>" + data[i].tel + "</td>" +
                        "<td ><a href='javascript:void(0);' class='user-edit'>修改</a></td>" +
                        "</tr>");
                    $('tbody').append("<tr class='activeList'>" +
                        "<td><span class='newCheck'><input type='hidden' name='userName[]' value=" + data[i].id + "><input type='checkbox' name='users[]' value=" + data[i].id + "></span></td>" +
                        "<td><input class='activeListInput1 activeListInput' type='text' value=" + data[i].department + "></td> " +
                        "<td><input class='activeListInput2 activeListInput' type='text' value=" + data[i].account + "></td>" +
                        "<td><input class='activeListInput3 activeListInput' type='text' value=" + data[i].password + "></td>" +
                        "<td><input class='activeListInput4 activeListInput' type='text' value=" + data[i].name + "></td>" +
                        "<td><select name='' id='' class='activeListInput5 activeListInput'><option value='管理员'>管理员</option></select></td>" +
                        "<td><input class='activeListInput6 activeListInput' type='text' value=" + data[i].tel + "></td>" +
                        "<td><a href='javascript:void(0);' class='user-sure'>确认</a></td>" +
                        "</tr>")
                }
            }
        });
    })
</script>

</html>